<template>
	<view class="login">
		<view class="title">您好！</view>
		<view class="text">欢迎来到职宝招聘，<text>立即注册</text></view>
		<view class="num">
			<label>
				<view>手机号</view>
				<input class="phone" type="text" placeholder="请输入手机号" v-model="phone" />
				<view class="stop" v-show="stop">手机号码不正确</view>
			</label>
			<label>
				<view>验证码</view>
				<input class="verif" type="text" placeholder="请输入验证码" v-model="code" />
				<view class="password" v-show="password">请输入正确的验证码</view>
				<view class="tiem" v-if="show" @click="getCode">发送</view>
				
				<view class="tiems" v-else>{{ count }}&nbsp;s</view>
			</label>
		</view>

		<view class="logins" @click="LoginclickHanlder">登&nbsp;录</view>
		<!-- <view class="back" @click="$router.push('/')">返回主页</view> -->
		<view class="back" @click="backHandler">返回主页</view>

		<view class="line">
			<view class="lines"></view>
			<text>其他登陆方式</text>
			<view class="lines"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "login",
		data() {
			return {
				phone: "18218894449",
				code: "",
				oncode: "1234",
				text: "",
				password: false,
				show: true,
				stop: false,
				count: "",
				timer: null,
				headers: "application/json; charset=utf-8",
			};
		},
		methods: {
			async getCode() {
				// 请求验证码 和倒计时
				let phoneReg = /^[1][3-9]\d{9}$/;

				if (!phoneReg.test(this.phone)) {
					this.stop = true;
				} else {
					let res = await uni.request({
						url: "https://yw.52kfw.cn/api/user/phone-get-code",
						method:'POST'
					})
					console.log(res);
					uni.showToast({
						title: `测试阶段密码:${res.data.data.code}`,
						icon: 'none'
					})
					// Dialog({
					// 	message: `测试阶段密码:${res.data.data.code}`
					// });
					if (res.data.statusCode == 200) {
						this.oncode = res.data.data.code;
					}
					const TIME_COUNT = 5;
					if (!this.timer) {
						this.count = TIME_COUNT;
						this.show = false;
						this.timer = setInterval(() => {
							if (this.count > 0 && this.count <= TIME_COUNT) {
								this.count--;
							} else {
								this.show = true;
								clearInterval(this.timer);
								this.timer = null;
							}
						}, 1000);
					}
				}
			},
			// 登录发起请求
			async LoginclickHanlder() {
				let phoneReg = /^[1][3-9]\d{9}$/;
				if (this.code !== this.oncode) {
					this.password = true;
				} else {
					this.password = false;
				}
				if (!phoneReg.test(this.phone)) {
					this.stop = true;
				} else {
					this.stop = false;
				}

				if (this.code == this.oncode && phoneReg.test(this.phone)) {
					let res = await uni.request({
						url: `https://yw.52kfw.cn/api/user/phone-login`,
						method: "POST",
						data: {
							phone: this.phone,
							code: this.code,
						},
						headers: {
							"content-type": this.headers,
						},
					});

					console.log(res);
					let {
						data: {
							statusCode
						},
					} = res;
					if (statusCode === 200) {
						console.log("登录成功");
						// this.$store.commit("increment", {
						// 	user: res.data.data.userInfo
						// });
						localStorage.setItem(
							"userInfo",
							JSON.stringify(res.data.data.userInfo)
						);
						let token = res.data.data.token;
						localStorage.setItem("token", token);
						uni.navigateBack();
						uni.showToast({
							title: `成功登录`,
						})
					} else {
						uni.showToast({
							title: `请求繁忙`,
							icon: 'none'
						})
						
					}
				} else this.code = "";
			},
			backHandler() {
				uni.navigateBack()
			},
		},
		watch: {
			phone(newval) {
				if (newval === "") {
					this.stop = false;
					this.codede = false;
				}
			},
		},
	};
</script>

<style lang="scss">
	.login {
		width: 100vw;
		box-sizing: border-box;
		padding: 240rpx 40rpx 0 40rpx;

		.line {
			position: fixed;
			bottom: 20%;
			right: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100vw;
			padding: 0 40rpx;
			box-sizing: border-box;

			.lines {
				width: 30%;
				height: 2rpx;
				background: #e6e6e6;
			}

			p {
				color: #666;
			}
		}

		.logins {
			background-color: #07c160;
			width: 80%;
			height: 76rpx;
			text-align: center;
			line-height: 76rpx;
			color: #fff;
			border-radius: 32rpx;
			font-size: 30rpx;
			margin: 40rpx auto;
			font-weight: 500;
			box-shadow: 2rpx 2rpx 2rpx 2rpx #f4f4f4;
		}

		.back {
			background-color: #1989fa;
			width: 80%;
			height: 76rpx;
			text-align: center;
			line-height: 76rpx;
			color: #fff;
			border-radius: 32rpx;
			font-size: 30rpx;
			margin: auto;
			font-weight: 500;
			box-shadow: 2rpx 2rpx 2rpx 2rpx #f4f4f4;
		}

		.num {
			width: 100%;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;

			label {
				width: 75%;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				position: relative;
				margin: 10rpx 0;

				.password {
					position: absolute;
					bottom: -14rpx;
					right: 140rpx;
					color: red;
					font-size: 24rpx;
					transform: scale(0.9);
				}

				.stop {
					position: absolute;
					bottom: -14px;
					right: 188rpx;
					color: red;
					font-size: 24rpx;
					transform: scale(0.9);
				}

				input {
					border: none;
					width: 60%;
					margin: 0 10rpx;
					height: 100%;
					font-size: 28rpx;
				}

				.tiem {
					position: absolute;
					right: -12rpx;
					z-index: 10;
					padding: 16rpx 6rpx;
					width: 160rpx;
					text-align: center;
					border-radius: 32rpx;
					background-color: #07c160;
					color: #fff;
					font-size: 24rpx;
				}

				.tiems {
					position: absolute;
					right: -12rpx;
					z-index: 10;
					padding: 16rpx 6rpx;
					width: 160rpx;
					text-align: center;
					border-radius: 32rpx;
					background-color: #fff;
					color: red;
					font-size: 24rpx;
				}
			}
		}

		.title {
			font-size: 48rpx;
			font-weight: bold;
			text-align: start;
		}

		.text {
			line-height: 40rpx;
			font-size: 32rpx;
			text-align: start;
			margin: 30rpx 0;

			span {
				color: #1989fa;
			}
		}
	}
</style>
